<template>
  <div class="city_body">
				<div class="city_list" ref ='cityBox'>
					<div class="city_hot">
						<h2>热门城市</h2>
						<ul class="clearfix" >
							<li v-for="hotCity in hot" :key='hotCity.id' @click='handlerTocity(hotCity.name,hotCity.id)'>{{hotCity.name}}</li>
							
						</ul>
					</div>
					<div class="city_sort">
						<div v-for="cityGroup in cities" :key="cityGroup.index">
							<h2 ref='h2'>{{cityGroup.index}}</h2>
							<ul>
								<li v-for='city in cityGroup.list' :key='city.id' @click='handlerTocity(city.name,city.id)'>{{city.name}}</li>
							</ul>
						</div>
					</div>
				</div>

			<div class="city_index">
					<ul>
						<li v-for="(item,index) in cities" :key="item.index" @click='goToCity(index)' :class='{active:index === activeindex}'>{{item.index}}</li>
					</ul>
				</div>
		</div>
</template>

<script>
export default {
    name:'City',
	data(){
		return {
			hot:[],
			cities:[],
			activeindex:-1
		}
	},
	async created(){
		//查看本地存储是否存在本地存储信息,就从本地获取
		let hot = window.localStorage.getItem('hot');
		let cities = window.localStorage.getItem('cities');
		if(hot && cities) {
			this.hot = JSON.parse(hot);
			this.cities = JSON.parse(cities);
			return;
		}


		//请求城市数据,并储存到本地
		let data = await this.$axios.get('/api/city');
		window.localStorage.setItem('hot',JSON.stringify(data.data.hot));
		window.localStorage.setItem('cities',JSON.stringify(data.data.cities));

		//一个国家的热门城市基本上固定不变的
		//有本地存储信息,就能直接从本地获取
		//console.log(data);
		this.hot = data.data.hot;
		this.cities = data.data.cities;


	},
	methods: {
		goToCity(index){
			console.log(index);
			this.$refs.cityBox.scrollTop = this.$refs.h2[index].offsetTop;
			this.activeindex = index;
		},
		handlerTocity(nm,id){
			//点击修改vuex的数据,并跳转nowplaying
			// 修改vuex里面的数据
            this.$store.commit('city/CITY_INFO',{
                nm,
                id
            })

            // 点击跳转nowplaying
            this.$router.push('/movie/nowplaying')

			// console.log(nm,id);
		
		 }
	}
    
}
</script>

<style scoped>
    #content .city_body{ margin-top: 45px; display: flex; width:100%; position: absolute; top: 0; bottom: 0;}
.city_body .city_list{ flex:1; overflow: auto; background: #FFF5F0;}
.city_body .city_list::-webkit-scrollbar{
    background-color:transparent;
    width:0;
}
.city_body .city_hot{ margin-top: 20px;}
.city_body .city_hot h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_hot ul li{ float: left; background: #fff; width: 29%; height: 33px; margin-top: 15px; margin-left: 3%; padding: 0 4px; border: 1px solid #e6e6e6; border-radius: 3px; line-height: 33px; text-align: center; box-sizing: border-box;}
.city_body .city_sort div{ margin-top: 20px;}
.city_body .city_sort h2{ padding-left: 15px; line-height: 30px; font-size: 14px; background:#F0F0F0; font-weight: normal;}
.city_body .city_sort ul{ padding-left: 10px; margin-top: 10px;}
.city_body .city_sort ul li{ line-height: 30px; line-height: 30px;}
.city_body .city_index{ width:20px; display: flex; flex-direction:column; justify-content:center; text-align: center; border-left:1px #e6e6e6 solid;};

#content .city_body .city_index ul li.active{ 
	border: 1px solid #e000e0;
}
</style>